<template>
	<view class="content">
		<uni-nav-bar style="width: 100%;background-color: white;;position: fixed;top: 0;" left-icon="left" :style="{'padding-top':tops+'px'}" @clickLeft="goBack">
			<view class="header">
				<view class="name">通用客户跟进</view>
				<!-- <image class="history" src="/static/12.png"></image> -->
			</view>
		</uni-nav-bar>
		<!-- <view class="header" :style="{'margin-top':tops+'px'}">
			<image class="back" @click="goBack" src="../../static/9.png"></image>
			<view class="name">通用客户跟进</view>
			<image class="history" src="/static/12.png"></image>
		</view> -->
		<!-- <view class="callPhone">
			<image class="phone" src="/static/12.png"></image>
		</view> -->

		<view class="tabList">
			<view class="li" :class="tabActive == index ? 'tabActive':''" v-for="(item,index) in tabList"
				@click="tabChange(index)">{{ item.text }}</view>
		</view>

		<view class="formCon" v-if="tabActive == 0">
			<image class="phone" src="/static/12.png"></image>
			<view class="li">
				<view class="name">张三，男</view>
			</view>
			<view class="li">
				<view class="">23岁</view>
			</view>
			<view class="li">
				<view class="">3116161676</view>
			</view>
			<view class="li">
				<view class="">关键客户</view>
			</view>
			<view class="li">
				<view class="">三棵树有限公司</view>
			</view>
			<view class="li">
				<view class="">汉南区航天城大道101号大厦3楼201室</view>
			</view>
			<view class="li">
				<view class="">已加微信</view>
			</view>
			<view class="li">
				<view class="time">添加时间：2020年2月1日  09时20分</view>
			</view>
			<view class="li">
				<view class="time">更新时间：2020年2月1日  09时20分</view>
			</view>
			<view class="li_2" style="border: 0;display: block;">
				<view class="lable" style="margin-bottom: 10rpx;color: rgba(168, 111, 171, 1);">新增跟进内容</view>
				<textarea style="font-size: 26rpx;width: 93%;height:200rpx;border-radius:10rpx;border: 1rpx solid #ccc;padding: 20rpx;" type="text" placeholder="请输入" />
			</view>
			<view class="li" style="margin-top: 20rpx;display: block;height: 140rpx;">
				<view style="width: 60%;float: left;">
					<view style="color: rgba(168, 111, 171, 1);">本次跟进时间</view>
					<uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
				</view>
				<view style="float: left;width: 36%;" >
					<view style="color: rgba(168, 111, 171, 1);">选择跟进类别</view>
					<picker style="width: 100%;" class="picker-box" mode="selector" :range="array" range-key="name" @change="bindPickerChange"
						:value="value">
						<view class="picker">
							<view v-if="sexIndex < 0" style="color: #999;">选择跟进类别</view>
							<view v-else>{{ array[sexIndex].name }}</view>
							<image class="icon" src="../../static/2.png"></image>
						</view>
					</picker>
				</view>
				
			</view>
			<view class="li" style="height: auto;display: block;margin-top: 10rpx;">
				<view class="title">
					<view class="line"></view>
					<view class="text" style="color: rgba(168, 111, 171, 1);">上传附件</view>
				</view>
				<view class="imgList">
					<uni-file-picker limit="2" title=""></uni-file-picker>
				</view>
			</view>
			<!-- <view class="li_1">
				<input type="text" placeholder="详细地址" />
				<image class="icon" src="../../static/6.png"></image>
			</view> -->
			<view class="li_1">
				<input type="text" placeholder="请输入地址" />
				<image @click="getMapLocation" class="icon" src="../../static/7.png"></image>
			</view>
            
            <button class="btn">保存</button>
			
		</view>
		<view class="formConImg" v-if="tabActive == 1">
			<view class="title">
				<view class="left">
					<view class="line"></view>
					<view class="text">5条跟进数据</view>
				</view>
			</view>
			<view class="lists">
				<view class="li">
					<view class="text">与张总进行线下拜访</view>
					<view class="status">合作中</view>
					<view class="num">初访 <span>2024年1月23日  10:12</span></view>
				</view>
			</view>
		</view>
		<view class="formConImg" v-if="tabActive == 2">
			<view class="title">
				<view class="left">
					<view class="line"></view>
					<view class="text">5条跟进数据</view>
					<view class="add">添加附件</view>
				</view>
			</view>
			<view class="lists">
				<view class="li">
					<view class="title">
						<view class="line"></view>
						<view class="text" style="color: #333;">最新-来自跟进</view>
					</view>
					<view class="imgList">
						<image src="../../static/4.png"></image>
					</view>
					<view class="num"> <span>两天前</span></view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: [{
						text: '客户'
					},
					{
						text: '跟进'
					},
					{
						text: '附件'
					}
				],
				tabActive: 0,
				array: [{
						name: '男',
						value: 0
					},
					{
						name: '女',
						value: 1
					}
				],
				sexIndex: -1,
				tops: 0,
				height: 0,
				datetimesingle:''
			}
		},
		onLoad() {

			uni.getSystemInfo({

				success: (e) => {

					this.tops = e.statusBarHeight;

					let custom = uni.getMenuButtonBoundingClientRect();

					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;

				}

			})

		},
		methods: {
			changeLog(e) {
							console.log('change事件:', e);
						},
			goBack() {
				uni.navigateBack()
			},
			interactRecord() {
				uni.navigateTo({
					url: "/pages/interactRecord/index"
				})
			},
			addSeniorData() {
				uni.navigateTo({
					url: "/pages/addSeniorData/index"
				})
			},
			tabChange(index) {
				this.tabActive = index
			},
			history() {
				uni.navigateTo({
					url: '/pages/customerHistory/index'
				})
			},

			getMapLocation() {
				let that = this
				uni.chooseLocation({
					success: (res) => {
						// 将获取到的地址信息存储
						this.address = res.address
						console.log(666, res)
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	// 将获取到的地址信息存储
																	this.address =
																		res
																		.address
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});
			},

		}
	}
</script>

<style>
	.header {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: white;
	}

	.header .back {
		width: 20rpx;
		height: 40rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		float: left;
	}

	.header .name {
		height: 100%;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.header .history {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		right: 50rpx;
		top: 30rpx;
		color: #008BDE;

	}

	/*#ifdef MP-WEIXIN*/
/* 	.header .name {
		width: 35%;
		line-height: 90rpx;
		margin-right: 50rpx;
		float: left;
	}

	.header .history {
		float: left;
		position: initial;
		color: #008BDE;
		margin-top: 40rpx;
	} */

	/*#endif*/
	.tabList {
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		border: 1rpx solid #008BDE;
		margin: auto;
		font-size: 28rpx;
		margin-top: 150rpx;
		/*#ifdef MP-WEIXIN*/
		margin-top: 200rpx;
		/*#endif*/
		display: flex;
	}

	.tabList .li {
		width: 33%;
		text-align: center;
		color: #008BDE;
	}
	.tabList .li:nth-of-type(2){
		border-left: 1rpx solid #008BDE;
		border-right: 1rpx solid #008BDE;
	}

	.tabActive {
		background-color: #008BDE;
		color: white !important;
	}

	.formCon {
		width: 90%;
		margin: auto;
		margin-top: 50rpx;
		font-size: 26rpx;
		padding-bottom: 100rpx;
		position: relative;
	}
	.formCon .phone{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 30rpx;
		top: 0rpx;
	}
	.formCon .li {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 0rpx;
	}
    .formCon .li .name{
		font-weight: bold;
	}
	.formCon .li input {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}
    .formCon .li .time{
		color: #999;
	}
	.formCon .li .picker-box {
		width: 44%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
		position: relative;
	}

	.formCon .li .picker-box view {
		margin-top: 22rpx;
	}

	.formCon .li .picker-box image {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 20rpx;
		top: 18rpx;
	}

	.formCon .li_1 {
		display: flex;
		margin-top: 20rpx;
	}

	.formCon .li_1 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
	}

	.formCon .li_1 image {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		margin-top: 14rpx;
	}

	.formCon .li_2 {
		display: flex;
		margin-top: 20rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
	}

	.formCon .li_2 input {
		width: 86%;
		height: 80rpx;
		border-radius: 10rpx;
		padding-left: 20rpx;
		font-size: 26rpx;
	}

	.formCon .li_2 image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		margin-top: 14rpx;
	}

	.addOther {
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #008BDE;
		color: white;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.addOther view {
		margin-left: 50rpx;
	}

	.addOther image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 13rpx;
		margin-right: 50rpx;
	}
	
	.lists{
		width: 100%;
		margin: auto;
		font-size: 26rpx;
	}
    .lists .li{
		line-height: 50rpx;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		padding-bottom: 20rpx;
	}
	.lists .li .text{
		color: #008BDE;
	}
	.lists .li .status{
		color: #A4579D;
	}
	.lists .li .num{
		color: #999;
	}
	.formConImg {
		width: 90%;
		margin: auto;
		margin-top: 30rpx;
	}

	.formConImg .title {
		width: 100%;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		position: relative;
	}
	.formConImg .title .add{
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 10rpx;
		position: absolute;
		right: 0;
		font-size: 26rpx;
		background-color: #008BDE;
		color: white;
	}
	.formConImg .title  .left{
		width: 100%;
		display: flex;
	}
	.formConImg .title .line {
		width: 7rpx;
		height: 40rpx;
		margin-top: 6rpx;
		background-color: #008BDE;
	}

	.formConImg .title .text {
		margin-left: 20rpx;
		margin-top: 3rpx;
	}

	.formConImg .li {
		margin-top: 40rpx;
	}

	.imgList {
		margin-top: 20rpx;
	}
	.imgList image{
		width: 100rpx;
		height: 100rpx;
		margin-left: 20rpx;
	}

	/deep/ .icon-add {
		width: 50rpx;
	}

	.btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		color: white;
		margin: auto;
		background-color: #008BDE;
		margin-top: 50rpx;
		font-size: 26rpx;
	}

	.callPhone {
		width: 90%;
		margin: auto;
		text-align: right;
		margin-bottom: 20rpx;
	}

	.phone {
		width: 40rpx;
		height: 40rpx;
	}
	/deep/ .uni-date-x--border{
		border: 1rpx solid #ccc;
		height:84rpx;
	}
	/deep/ .uni-date{
		/* width: 60% !important; */
		float: left !important;
	}
</style>